<template>
	<div v-loading="loading" class="list">
		<div class="end">
			<el-button type="primary" :loading="loading" @click="getdata">保存设置</el-button>
		</div>
		<span class="bold">模块参数设置:</span>
		<div style="flex: 1">
			<heade v-if="type == 'header' && Classification == 'header'" :data="data"></heade>
			<swap v-if="type == 'module' && Classification == 'swap'" :data="data"></swap>
			<leftpage v-if="type == 'Staticpages' && Classification == 'leftpage'" :data="data"></leftpage>
			<rightpage v-if="type == 'Staticpages' && Classification == 'rightpage'" :data="data"></rightpage>
			<!-- 富文本 -->
			<richtext v-if="type == 'richtext' && Classification == 'richtext'" :data="data"></richtext>
			<Collapse v-if="type == 'assembly' && Classification == 'Collapse'" :data="data"></Collapse>
			<Timeline v-if="type == 'assembly' && Classification == 'Timeline'" :data="data"></Timeline>
			<!-- 网站底部 -->
			<foot v-if="type == 'assembly' && Classification == 'foot'" :data="data"></foot>
		</div>
	</div>
</template>
<script>
	// 这里要把index 和list 传给组件  组件修改时 实时传回
	import { dataRequest as api } from '@/api/api'
	import leftpage from '@/components/pagesettings/leftpage.vue'
	import rightpage from '@/components/pagesettings/rightpage.vue'
	import richtext from '@/components/pagesettings/richtext.vue'
	import foot from '@/components/pagesettings/foot.vue'
	import heade from '@/components/pagesettings/heade.vue'
	import swap from '@/components/pagesettings/swap.vue'
	import Timeline from '@/components/pagesettings/Timeline.vue'
	import Collapse from '@/components/pagesettings/Collapse.vue'
	export default {
		components: {
			leftpage,
			rightpage,
			richtext,
			foot,
			swap,
			heade,
			Timeline,
			Collapse,
		},
		props: ['data', 'list'],

		data() {
			return {
				loading: false,
				page: this.$route.params.page ? this.$route.params.page : 'index',
				type: '',
				Classification: '',
			}
		},
		methods: {
			async getdata() {
				let data = this.list.map((item) => ({ ...item }))
				for (let index = 0; index < data.length; index++) {
					delete data[index].page
					delete data[index].parameterlist
				}
				this.loading = true
				let array = await api('Create', 'parameters', { page: this.page, Configuration: data })
				if (array.code == 200) {
					this.$message.success(`保存成功`)
				} else {
					this.$message.error(`未修改任何数据`)
				}
				this.loading = false
			},
		},
		watch: {
			data(newContent, oldContent) {
				if (newContent) {
					this.type = newContent.type
					this.Classification = newContent.Classification
				}
			},
		},
		mounted() {
			this.type = this.data.type
			this.Classification = this.data.Classification
		},
	}
</script>
<style scoped>
	.list {
		padding: 15px 15px 0;
		background: #fff;
		display: flex;
		flex-direction: column;
		gap: 20px;
		width: 460px;
	}
	.end {
		align-self: flex-end;
	}
	.bold {
		font-weight: bold;
	}
</style>
<!-- 使用这个编辑器 -->
<!-- https://tiptap.dev/docs/editor/api/nodes/blockquote -->
